<template>
	<!-- 筛选 -->
	<view>
		<view class="mask" @click="close_mask()" @touchmove.stop.prevent="moveHandle" v-show="showMask"></view>
		<view class="check_wrap" :style="{top:showMask?topHeight+'px':'-100%'}">
			<view class='check_list'>
				<view class="check_item" :class="screenIndex==-1?'active':''" @click.stop="check_screen(-1)">不限</view>
				<view class="check_item" :class="screenIndex==index?'active':''" v-for='(item,index) in screens' :key="index" @click.stop="check_screen(index)">{{item.name}}</view>
			</view>
			<view class='btn_wrap'>
				<view class='del_btn' @click.stop="delete_screen()">清除</view>
				<view class='con_btn' @click.stop="confirm_screen()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			showMask: {
			    type: Boolean
			},
			screens: {
				type: ''
			},
			screenIndex: {
				type: ''
			},
			topHeight: {
				type: ''
			}
		},
		data() {
			return {
		       current_index: '', 
			}
		},
		methods:{
			// 禁止触摸穿透
			moveHandle(){},
			// 关闭
			close_mask(){
				this.$emit("closeMask")
			},
			// 选择
			check_screen(index){
				this.current_index=index;
				this.$emit("checkScreen",index)
			},
			// 清除
			delete_screen(){
				this.$emit("deleteScreen")
			},
			// 确定
			confirm_screen(){
				this.$emit("confirmScreen",this.current_index)
			}
		}
	}
</script>

<style lang="scss">
	.check_wrap{
		position: fixed;
		left: 0;
		width: 100%;
		background: #fff;
		transition: all 0.4s;
		z-index:991;
		box-sizing: border-box;
		padding: 40rpx 32rpx;
		border-radius: 0 0 32rpx 32rpx;
		.check_list{
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			.check_item{
				width: 212rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				color: #424752;
				font-weight: 400;
				background: #F7F9FB;
				margin-right: 24rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.active{
				color: #5B90FF;
				background: rgba(91,144,255,0.1);
			}
		}
		.btn_wrap{
			display: flex;
			flex-direction: row;
			.del_btn{
				width: 212rpx;
				height: 104rpx;
				background:rgba(146,155,167,0.15);
				text-align: center;
				line-height: 104rpx;
				font-size: 36rpx;
				font-weight: 400;
				color:rgba(121,133,148,1);
				border-radius: 16rpx;
				margin-right: 26rpx;
			}
			.con_btn{
				flex: 1;
				height: 104rpx;
				background:rgba(91,144,255,1);
				text-align: center;
				line-height: 104rpx;
				font-size: 36rpx;
				font-weight: 400;
				color:#fff;
				border-radius: 16rpx;
			}
		}
	}
</style>
